@import './variables.module.less';

html,
body {
    width: 100%;
    height: 100%;
    overflow: auto;
    .hide-scrollbar();
}

html {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

body {
    margin: 0;
    padding: 0;
    .font-size();
    line-height: 1.75;
    color: var(--mi-on-background);
    background: var(--mi-background);
    .letter-spacing();
    .scrollbar();
    font-family: @mi-font-basic;
    position: relative;

    ::selection {
        color: var(--mi-on-primary);
        background-color: var(--mi-primary);
        background-image: linear-gradient(127deg, var(--mi-primary) 0, var(--mi-secondary) 52%, var(--mi-tertiary) 100%);
    }

    ::-moz-selection {
        color: var(--mi-on-primary);
        background-color: var(--mi-primary);
        background-image: linear-gradient(127deg, var(--mi-primary) 0, var(--mi-secondary) 52%, var(--mi-tertiary) 100%);
    }
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    width: 100%;
    height: 100%;
    image-rendering: -o-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    object-fit: cover;
}

a {
    color: var(--mi-primary);
    background: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    .transition(color);
    text-decoration-skip: objects;

    &:active,
    &:hover,
    &:visited,
    &:link {
        color: var(--mi-primary);
    }
}

input {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }
}

:global {
    .ant-table-content {
        &::-webkit-scrollbar {
            .properties(height, 4);
        }
    
        &::-webkit-scrollbar-thumb {
            .radius(2);
            background: var(--mi-primary);
        }
    }

    .ant-table-wrapper {
        .ant-table-row-expand-icon {
            border-color: var(--mi-secondary);
            color: var(--mi-on-secondary);
            background-color: var(--mi-secondary);
            .radius();

            &:focus,
            &:hover {
                color: var(--mi-on-secondary);
                border-color: var(--mi-secondary);
            }
        }
    }

    div[id^="allow_copycopy-"] {
        display: none;
    }

    .ant-message,
    .ant-dropdown {
        z-index: 2947483647;
    }

    .ant-table + .ant-pagination {
        .flex();
    }

    .ant-popconfirm {
        .ant-popconfirm-buttons {
            button {
                box-shadow: none;
            }
        }
    }

    .ant-input,
    .ant-input-focused,
    .ant-input-number,
    .ant-input-number-focused {
        &:focus,
        &:hover {
            border-color: var(--mi-primary);
        }
    }

    .ant-btn {
        &-primary {
            background: var(--mi-primary);
            color: var(--mi-on-primary);
            border-color: var(--mi-primary);
    
            &:not(:disabled):focus,
            &:not(:disabled):hover {
                border-color: transparent;
                color: var(--mi-on-primary);
                background: var(--mi-primary);
            }
        }

        &-default:not(:disabled):hover {
            border-color: var(--mi-primary);
            color: var(--mi-primary);
        }
    }

    .ant-btn-primary.ant-btn-dangerous {
        background: #dc4446;
        box-shadow: none;
        border-color: #dc4446;
        color: #fff;

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            background: #dc4446;
            border-color: #dc4446;
            color: #fff;
        }
    }

    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
        &:focus,
        &:hover {
            .ant-select-selector {
                border-color: var(--mi-primary);
                box-shadow: none;
            }
        }
    }

    .ant-select-focused.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
        border-color: var(--mi-primary);
        box-shadow: none;
    }

    .ant-radio-wrapper {
        .ant-radio-checked .ant-radio-inner {
            border-color: var(--mi-primary);
            background-color: var(--mi-primary);
        }

        .ant-radio-disabled .ant-radio-inner::after {
            background-color: rgba(255, 255, 255, 0.5);
        }

        &:hover {
            .ant-radio-inner {
                border-color: var(--mi-primary);
            }
        }
    }

    .ant-tabs .ant-tabs-tab:hover,
    .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: var(--mi-primary);
    }

    .ant-tabs .ant-tabs-ink-bar {
        background: var(--mi-primary);
    }

    .ant-switch.ant-switch-checked,
    .ant-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
        background: var(--mi-primary);
    }

    .ant-switch .ant-switch-inner .ant-switch-inner-checked {
        color: var(--mi-on-primary);
    }

    .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
        border-color: var(--mi-primary);
    }

    .ant-pagination .ant-pagination-item-active,
    .ant-pagination .ant-pagination-item-active:hover {
        border-color: var(--mi-primary);
    }

    .ant-pagination .ant-pagination-item-active a,
    .ant-pagination .ant-pagination-item-active:hover a {
        color: var(--mi-primary);
    }

    .ant-pagination .ant-pagination-options-quick-jumper input:hover {
        border-color: var(--mi-primary);
    }

    .ant-checkbox-checked:after,
    .ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner,
    .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled):after {
        border-color: var(--mi-primary);
    }

    .ant-checkbox-checked .ant-checkbox-inner {
        background-color: var(--mi-primary);
        border-color: var(--mi-primary);
    }

    .ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner,
    .ant-checkbox-indeterminate .ant-checkbox-inner:after {
        background-color: var(--mi-primary);
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        &,
        &:hover,
        &:first-child {
            color: var(--mi-primary);
            border-color: var(--mi-primary);
        }
    }

    .ant-radio-button-wrapper:hover {
        color: var(--mi-primary);
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        &:hover:before,
        &:before {
            background-color: var(--mi-primary);
        }
    }

    .ant-popover {
        .ant-popover-inner {
            border: 0.0625rem solid var(--mi-primary);
        }

        .ant-popover-arrow:before {
            background: var(--mi-primary);
        }
    }
}

*, :after, :before, [class*=mi-] {
    box-sizing: border-box;
}